<template>
    <div class="facility">
        <div class="search">
            <el-button type="primary" size="small" @click="editRef.drawer=true" >添加</el-button>
        </div>
        <el-table size="small" :data="showFacilities" width="98">
            <el-table-column   label="编号" width="180" type="index"/>               
            <el-table-column v-if="false" prop="id"  label="编号" width="100" />               
            <el-table-column  prop="facilityInfo" label="设施名称" width="100"  />
            <el-table-column prop="facilityType" label="设施类型" width="150" />
        </el-table>
        <EditFacility ref="editRef" @sync-list="loadFacilities"></EditFacility>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref ,computed} from "vue";
import {$facilityList  } from "../api/facilities.ts";
import EditFacility from "../components/facility/EditFacility.vue";
//设施列表
let facilities = ref([])

//页码
let pageIndex = ref(1)
//显示的列表
let showFacilities = computed(()=>{
    return facilities.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
})

//加载角色列表
const loadFacilities = async()=>{
    facilities.value = await $facilityList()
    console.log(facilities.value);
    
}

onMounted(()=>{
    loadFacilities()

})

//定义编辑组件ref对象
let editRef = ref(null)
</script>

<style lang="scss" scoped>
.search{
    margin-bottom: 5px;
}
</style>